<template>
  <Teleport to="body">
    <!-- 弹窗组件 -->
    <nut-popup v-model:visible="isShow" style="border-radius: 15px; background: transparent"
      :close-on-click-overlay="false" :z-index="zindex" customClass="pop-class">
      <div class="popup-header" v-if="showHeader">
        <div class="head_left">
          <slot name="left"></slot>
        </div>
        <slot name="header">{{ title }}</slot>
        <iconpark-icon v-if="showClose" icon-id="exit" size="1.25rem" class="close_icon"
          @click="isShow = false"></iconpark-icon>
      </div>
      <div class="popup-body">
        <slot></slot>
      </div>
    </nut-popup>
  </Teleport>
</template>

<script setup lang="ts">
import { computed } from "vue";

const props = defineProps({
  title: {
    type: String,
    default: "",
  },
  zindex: {
    type: [Number, String],
    default: "9999",
  },
  visible: {
    type: Boolean,
    default: false,
  },
  showClose: {
    type: Boolean,
    default: true,
  },

  showHeader: {
    type: Boolean,
    default: true,
  },
});
const emit = defineEmits(["update:visible", "close"]);
const isShow = computed({
  get: function () {
    return props.visible;
  },
  set: function (value: any) {
    emit("update:visible", value);
    emit("close");
  },
});
</script>

<style lang="scss" scoped>
.popup-header {
  width: 347px;
  height: 48px;
  line-height: 48px;
  display: flex;
  justify-content: center;
  position: relative;
  font-size: 16px;
  font-weight: 500;
  color: #ffffff;
  border-bottom: 1px solid #1d1b43;
  background: #131232;
  border-radius: 15px 15px 0 0;

  .close_icon {
    position: absolute;
    right: 10px;
    top: 14px;
  }

  .head_left {
    position: absolute;
    left: 10px;
    top: 0px;
  }
}

.popup-body {
  width: 347px;
  min-height: 150px;
  overflow-y: auto;
  background: #131232;
  border-radius: 0 0 15px 15px;
  box-shadow: 0.5px 0.5px 1px 0px #2e296b inset;
}
</style>
